<template>
  <div class="app-container">
    <el-card>
      <div class="expert-title-outBox">
        <div class="expert-title">绩效指标详情</div>
        <div class="back-btn" @click="handBack">
          <img src="@/assets/images/tripartite/back_button.png" alt="" />返回
        </div>
      </div>
      <!-- 基本信息 -->
      <div>
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png" />
          <span>基本信息</span>
        </div>
        <el-descriptions border :column="3">
          <el-descriptions-item label="绩效名称"
            >kooriookami</el-descriptions-item
          >
          <el-descriptions-item label="绩效类型"
            >18100000000</el-descriptions-item
          >
          <el-descriptions-item label="添加时间">苏州市</el-descriptions-item>
          <el-descriptions-item label="状态">苏州市</el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 绩效指标 -->
      <div>
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png" />
          <span>绩效指标</span></div>
        <el-table :data="technicalList" border>
          <el-table-column label="序号" align="center" prop="roleId" />
          <el-table-column
            label="指标名称"
            align="center"
            prop="roleName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="指标描述"
            align="center"
            prop="roleKey"
            :show-overflow-tooltip="true"
          />
           <el-table-column
            label="指标权重"
            align="center"
            prop="roleKey"
            :show-overflow-tooltip="true"
          />
        </el-table>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层（技术职称）
      technicalDialog: false,
      // 是否显示弹出层（职业资格）
      professionDialog: false,
      // 表单参数 （技术职称）
      technicalForm: {},
      // 表单校验 （技术职称）
      technicalRules: {},
      // 表单参数
      queryParams: { roleName: "" },
      // 表单校验
      rules: {
        roleName: [
          { required: true, message: "角色名称不能为空", trigger: "blur" },
        ],
      },
      //技术职称列表
      technicalList: [],
    };
  },
  methods: {
    /** 返回按钮操作 */
    handBack(){
      this.$router.push({
        path: "/system/performance",
      });
    },
    /** 新增按钮操作 技术职称*/
    handleAdd() {
      this.technicalDialog = true;
      this.title = "添加技术职称";
    },
    /** 取消按钮 技术职称*/
    cancel() {
      this.technicalDialog = false;
    },
    /** 确定按钮 技术职称*/
    submitForm() {
      this.technicalDialog = false;
    },
    /** 新增按钮操作 职业资格*/
    handleAddProfession() {
      this.professionDialog = true;
      this.title = "添加职业资格";
    },
  },
};
</script>
<style scoped lang="scss">
.expert-title-outBox {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  .expert-title {
    font-weight: 500;
  }
  .back-btn {
      font-size: 14px;
      color: #333;
      cursor: pointer;
      img {
        width: 16px;
        height: 16px;
        margin-right: 6px;
        position: relative;
        top: 2px;
      }
    }
}
.submit-outBox {
  width: 100%;
  text-align: center;
  .btn {
    width: 200px;
  }
}
.model-title {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ebecef;
  border-top: 1px solid #ebecef;
  margin-bottom: 24px;
  margin-top: 24px;
  img {
    width: 16px;
    height: 16px;
    position: relative;
    right: 5px;
    top: 2px;
  }
}
</style>
<style>
/*表单label不加粗  */
label {
  font-weight: normal !important;
}
/* el-descriptions-item 文字居中 */
.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  text-align: center;
}
</style>
